<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用slot分发内容__入门</title>
</head>
<body>

<div id="app">
    <children-component v-show="showChildren"></children-component>
</div>
<hr>


<div id="app1">
    <children-component></children-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 当需要让组件混合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程就叫做内容分发。
     *
     * props传递数据、events触发事件和slot内容分发，这个三个就构成了Vue组件的3个API来源。再复杂的组件也是由这3个部分组成.
     * **/


    /**
     * <children-component>{{ message }}</children-component>注意此处的message就是一个slot，但是它绑定的是父组件的数据，而不是组件<children-component>的数据。
     *
     *父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件的作用域内编译。
     * **/

    Vue.component("children-component",{
        template:"<div>子组件</div>",
    });

    var app = new Vue({
        el:"#app",
        data:{
            showChildren:true,  //这里的状态showChildren绑定的是父组件的数据。
        },
    });



    /**
     * 如果想让状态showChildren绑定的是子组件的数据，代码应当修改为：
     * **/

    Vue.component("children-component",{
        template:"<div v-show='showChildren'>这是子组件的内容</div>",  //此时slot分发的内容作用域是在父组件上的。
        data:function () {
            return {
                showChildren:true,
            }
        }
    });

    var app1 = new Vue({
        el:"#app1",
    })
</script>
</body>
</html>
